<!--
*@Author: QWP
*@Description: 研判
*@Date 2024-09-10 13:38
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-table-header>
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <a-col>
          <u-button-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
          </u-button-space>
        </a-col>
        <a-col flex="1" align="end">
          <u-button-space>
            <u-icon-button itype="add" @click="toEdit(1)">新建</u-icon-button>
            <u-icon-button itype="edit" @click="toEdit(2)">修改</u-icon-button>
            <u-icon-button itype="report" @click="publishBtn">发布</u-icon-button>
            <u-icon-button itype="delete" @click="deleteBtn">删除</u-icon-button>
          </u-button-space>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :loading="loading"
        @onSelect="({ selectedRows }) => tabSelData = selectedRows"
        @change="getSearch">
      </u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle" 
    :current="currntRow"
    @success="showEdit = false; currntRow = {}; getSearch()"
    @close="currntRow = {}"/>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, onActivated } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore, useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { jsonCopy, alertC, nullC  } from '@/util/common'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import { cloneDeep } from 'lodash'
import { messageC } from "@/util/common";
import { useTableScroll } from "@/hooks/useTable";
import { types } from './data.ts'
import * as studyApi from '@/service/assist/sudyJudge'

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getSearch()
})

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    keywords: "",
  },
});
const formItemProps: FormItemProps = {
  labelWidth: '72px',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = reactive([
  { label: "研判类型", key: "type", element: "select", col: { span: 4 }, 
    formItemProps: formItemProps,
    componentProps: {
      options: types
    }
  },
  { label: "关键字", key: "keywords", element: "input", col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      placeholder: "标题",
    },
  },
]);

// 列表
const loading = ref<boolean>(false)
const tabData = ref<any[]>([]);
const tabSelData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "index", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  { dataIndex: "content", title: "标题", minWidth: 150 },
  { dataIndex: "type", title: "研判类型", width: 150, align: 'center' ,
    customRender: ({ text }) => {
      const info = types.find(i => i.value == text) || {};
      return nullC(info['label'])
    }
  },
  { dataIndex: "releaseusername", title: "发布者", width: 150, align: 'center'  },
  { dataIndex: "releasedate", title: "发布时间", width: 150, align: 'center' },
  { dataIndex: "isreleases", title: "发布状态", width: 150, align: 'center' },
]);

// 列表查询
const getSearch = async (current: number) => {
  loading.value = true
  try {
    if(current == 1) {
      pagenation.current = 1;
    }
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const res = await studyApi.page(searchF);
    if(res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.total = res.data.total || 0
    }
  } catch (error) {}
  loading.value = false;
}

// 编辑
const currntRow = ref({});
let dialogTitle = ref<string>("编辑研判")
let showEdit = ref<boolean>(false)
// type 1 新增     2 修改
const toEdit = (type) => {
  if(type == 2) {
    if(tabSelData.value.length != 1 ) {
      alertC("请选择一条数据进行编辑!");
      return
    }
    currntRow.value = tabSelData.value[0];
  }

  showEdit.value = true
}

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    messageC("请先选择要删除的数据!", "warning");
    return;
  }

  let canDel = tabSelData.value.some(i => i.isrelease == 1);
  if(canDel) {
    messageC("已发布的数据不允许删除!");
    return
  }

  let ids = tabSelData.value.map((item) => item.keyid);
  await alertC("确定删除选中的数据?", 'confirm')

  loading.value = true;
  try {
    const data = await studyApi.del({ ids: ids.join() });
    if (data.code == 0) {
      messageC(data.msg, "success");
      getSearch();
    } else {
      alertC(data.msg, "warning");
    }
  } catch (error) {}
  loading.value = false;
}

// 发布
const publishBtn = async () => {
  if(tabSelData.value.length == 0) {
    messageC("请先选择要发布的数据!", "warning");
    return
  }

  await alertC("确认发布?", "confirm");

  loading.value = true;
  try {
    let ids = tabSelData.value.map(i => i.keyid)
    const res = await studyApi.releaseJudg(ids)
    if(res.code == 0) {
      messageC(res.msg, "success");
      getSearch()
    }
    else {
      messageC(res.msg, "error");
    }
  } catch (error) {}
  loading.value = false;
}

defineExpose({
  toEdit,
});

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
